<template>
    <view class="coupon-item x-bc" @tap="selectCoupon">
        <!-- 
        <view class="box-con">
            <view class="box-text" v-if="index==0">厂商</view>
            <view class="box-text" v-else>经销商</view>
        </view> -->

        <!-- <view class="coupon-money">
            <view class="nick" v-if="!types">{{item.seller_name}}使用</view>
            <view class="layof" :style="{color:theme}">￥{{item.money}}</view>
            <view class="end_time">{{item.end_time}}前使用</view>
            <view v-if="!types">
                <view class="tit">券号：{{item.ticket}}</view>
                <view class="demand">{{item.title}}</view>
            </view>
            <view style="padding: 4px 0;text-decoration:underline;" class="demand" @click.stop="gotoDetails()">
                使用范围
            </view>
        </view> -->

        <view class="list">
            <view class="list-data">
                <view class="coupon-price" v-if="item.offer_type == 3">
                    <view class="discounts">
                        <text class="min">￥</text>
                        <text class="max">{{item.offer_amount}}</text>
                    </view>
                    <view class="full-reduction"><text>满{{item.bottom_amount}}减{{item.offer_amount}}</text>
                    </view>
                    <view class="jag"></view>
                </view>
                <view class="coupon-price" v-if="item.offer_type == 1">
                    <view class="discounts">
                        <text class="min">￥</text>
                        <text class="max">{{item.offer_amount}}</text>
                    </view>
                    <view class="full-reduction"><text>无门槛立减{{item.offer_amount}}</text></view>
                    <view class="jag"></view>
                </view>
                <view class="coupon-price" v-if="item.offer_type == 2">
                    <view class="discounts">
                        <text class="min"></text>
                        <text class="max">{{item.offer_prop}}%</text>
                    </view>
                    <view class="full-reduction"><text>无门槛优惠</text></view>
                    <view class="jag"></view>
                </view>
                <view class="coupon-price" v-if="item.offer_type == 4">
                    <view class="discounts">
                        <text class="min"></text>
                        <text class="max">{{item.offer_prop}}%</text>
                    </view>
                    <view class="full-reduction"><text>满{{item.bottom_amount}}折</text></view>
                    <view class="jag"></view>
                </view>
                <view class="coupon-info">
                    <view class="info-title">
                        <!-- <view class="tag">
                            <text>{{ offerType.find(item=>item.dictValue==item.offer_type).dictLabel}}</text>
                        </view> -->
                        <view class="title">
                            <text>{{item.title}}</text>
                        </view>
                    </view>
                    <view class="date-get" v-if="item.vali_type == 1 || item.vali_type == 2">
                        <view class="date">
                            <text>{{$u.timeFormat(item.validity_time_start, 'yyyy/mm/dd')}}-{{$u.timeFormat(item.validity_time_end,
                                'yyyy/mm/dd')}}</text>
                        </view>
                        <!-- <view class="get" @click="onCouponUse" v-if="TabShow === 0">
                            <text>立即使用</text>
                        </view> -->
                    </view>
                    <view class="date-get" v-if="item.vali_type == 0 ">
                        <view class="date">
                        </view>
                        <!-- <view class="get" @click="onCouponUse" v-if="TabShow === 0">
                            <text>立即使用</text>
                        </view> -->
                    </view>
                </view>
            </view>
            <!-- <view class="describe" v-show="isDes">
                <text>{{ couponType.find(item=>item.dictValue==1).dictLabel}}</text>
            </view> -->
            <view class="btn">
                <view v-if="isShowCheck">

                    <checkbox class='round orange' :disabled="item.disable" :class="item.checked?'checked' : ''" :checked="item.checked? true : false">
                    </checkbox>

                </view>
                <view v-else>
                    <view class="get-btn" :style="{color:color, borderColor:color, background:solid}">去使用</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    components: {

    },
    data() {
        return {
            couponType: [{
                dictLabel: '商品优惠券',
                dictValue: 1
            }],
            offerType: [
                // {
                //     dictLabel: '全部',
                //     dictValue: ''
                // },
                {
                    dictLabel: '无条件立减',
                    dictValue: 1
                }, {
                    dictLabel: '无条件打折',
                    dictValue: 2
                },
                {
                    dictLabel: '满减优惠',
                    dictValue: 3
                }, {
                    dictLabel: '满折优惠',
                    dictValue: 4
                }
            ],
            validType: [
                // {
                //     dictLabel: '全部',
                //     dictValue: ''
                // },
                {
                    dictLabel: '无限期',
                    dictValue: 0
                }, {
                    dictLabel: '时间区间',
                    dictValue: 1
                },
                {
                    dictLabel: '有效期',
                    dictValue: 2
                }
            ],
            numberType: [
                // {
                //     dictLabel: '全部',
                //     dictValue: ''
                // },
                {
                    dictLabel: '无限量',
                    dictValue: 0
                }, {
                    dictLabel: '数量有限',
                    dictValue: 1
                }
            ],
        }
    },
    props: {
        index: {
            type: Number,
            default: 0
        },
        // 是否有勾选框
        isShowCheck: {
            type: Boolean,
            default: false
        },
        item: {
            type: Object
        },
        types: {
            type: String,
            default: ''
        },
        theme: {
            type: String,
            default: '#FF4A26'
        },
        solid: {
            type: String,
            default: '#ffffff'
        },
        color: {
            type: String,
            default: '#FF4A26'
        },
    },
    methods: {
        // 查看优惠券使用范围
        gotoDetails() {
            console.log('优惠券使用范围')
        },
        selectCoupon() {
            let that = this;
            // if (that.isShowCheck) {
            //     that.$bus.$emit('updateChecked', that.index);
            // }
            that.$bus.$emit('updateChecked', that.index);
        },
    }
}
</script>

<style lang='scss'>
.coupon-item {
  border-radius: 10upx;
  margin-top: 22upx;
  .box-con {
    width: 85px;
    height: 88px;
    overflow: hidden;
    position: absolute;
    top: -3px;
    right: -3px;
  }

  .box-text {
    color: white;
    text-align: center;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    position: relative;
    padding: 2px 0;
    left: 37px;
    top: 4px;
    width: 65px;
    background-color: #00801c;
    background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#ff503e),
      to(#ff2f50)
    );
    background-image: -webkit-linear-gradient(top, #ff503e, #ff2f50);
    background-image: -moz-linear-gradient(top, #ff503e, #ff2f50);
    background-image: -ms-linear-gradient(top, #ff503e, #ff2f50);
    background-image: -o-linear-gradient(top, #ff503e, #ff2f50);
    -webkit-box-shadow: 0px 0px 3px #ff1b40;
    -moz-box-shadow: 0px 0px 3px #ff1b40;
    box-shadow: 0px 0px 3px #ff1b40;
  }

  .box-text:before,
  .box-text:after {
    content: "";
    position: absolute;
    bottom: -3px;
  }

  .box-text:before {
    left: 0;
  }

  .box-text:after {
    right: 0;
  }
  // newcss开始
  .list {
    width: 100%;
    min-height: 180rpx;
    box-shadow: 0 0 14rpx rgba(0, 0, 0, 0.1);
    border-radius: 6rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    position: relative;
    .list-data {
      display: flex;
      align-items: center;
      width: 100%;
      height: 180rpx;
      background-color: #fff;
      .coupon-price {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 40%;
        height: 100%;
        background-color: #fe7e54;

        .discounts {
          display: flex;
          justify-content: center;
          align-items: flex-end;
          width: 100%;

          .min {
            color: #ffffff;
            font-size: 32rpx;
            font-weight: bold;
          }

          .max {
            font-size: 48rpx;
            color: #ffffff;
            font-weight: bold;
          }
        }

        .full-reduction {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 60rpx;

          text {
            font-size: 24rpx;
            color: #ffffff;
          }
        }

        .jag {
          position: absolute;
          top: 0;
          left: -6rpx;
          width: 6px;
          height: 100%;
          background-size: 10px 6px;
          background-color: #fff;
          background-position: 100% 35%;
          background-image: linear-gradient(
              -45deg,
              #fe7e54 25%,
              transparent 25%,
              transparent
            ),
            linear-gradient(-135deg, #fe7e54 25%, transparent 25%, transparent),
            linear-gradient(-45deg, transparent 75%, #fe7e54 75%),
            linear-gradient(-135deg, transparent 75%, #fe7e54 75%);
        }
      }
      .coupon-info {
        width: 70%;
        height: 90%;
        padding: 0 4%;
        .info-title {
          display: flex;
          width: 100%;
          height: 60rpx;
          .tag {
            margin-right: 10rpx;
            text {
              padding: 4rpx 16rpx;
              color: #ffffff;
              background-color: #fe7e54;
              font-size: 24rpx;
              border-radius: 40rpx;
            }
          }
          .title {
            text {
              font-size: 24rpx;
              color: #212121;
            }
          }
        }
        .date-get {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 80rpx;
          border-bottom: 2rpx dashed #eeeeee;
          .date {
            display: flex;
            align-items: center;
            width: 290rpx;
            text {
              font-size: 24rpx;
              color: #999;
            }
          }
          .get {
            text {
              padding: 10rpx 20rpx;
              background-color: #fe7e54;
              color: #ffffff;
              font-size: 24rpx;
              border-radius: 100rpx;
            }
            .use {
              background-color: transparent;
              border: 1px solid #fe7e54;
              color: #fe7e54;
            }
          }
        }
        .describe-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 40rpx;
          text {
            color: #555555;
            font-size: 24rpx;
          }
          .more {
            transform: rotate(90deg);
          }
        }
      }
    }
    .coupon-lose {
      .coupon-price {
        background-color: #c0c0c0;
        .jag {
          position: absolute;
          top: 0;
          left: -6rpx;
          width: 6px;
          height: 100%;
          background-size: 10px 6px;
          background-color: #fff;
          background-position: 100% 35%;
          background-image: linear-gradient(
              -45deg,
              #c0c0c0 25%,
              transparent 25%,
              transparent
            ),
            linear-gradient(-135deg, #c0c0c0 25%, transparent 25%, transparent),
            linear-gradient(-45deg, transparent 75%, #c0c0c0 75%),
            linear-gradient(-135deg, transparent 75%, #c0c0c0 75%);
        }
      }
      .coupon-info {
        .info-title {
          .tag {
            text {
              background-color: #c0c0c0;
            }
          }
          .title {
            text {
              color: #c0c0c0;
            }
          }
        }
        .date-get {
          .date {
            text {
              color: #c0c0c0;
            }
          }
        }
      }
    }
    .describe {
      display: flex;
      align-items: center;
      padding: 0 4%;
      height: 60rpx;
      background-color: #ffffff;
      box-shadow: 0 -10rpx 10rpx #f5f5f5;
      text {
        color: #cccccc;
        font-size: 24rpx;
      }
    }
    .use-status {
      position: absolute;
      right: -20rpx;
      top: -25rpx;
      z-index: 10;
      width: 100rpx;
      height: 100rpx;
      border: 2rpx solid #c0c0c0;
      border-radius: 100%;
      text {
        display: inline-block;
        color: #c0c0c0;
        font-size: 24rpx;
        transform: rotate(45deg);
        margin-top: 40rpx;
      }
    }
  }
  .nodata {
    // background-color: #f2f2f2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 150rpx;
    image {
      width: 298rpx;
    }
    .txt {
      text-align: center;
      display: flex;
      text {
        font-size: 28rpx;
        color: #a4a4a4;
        padding-top: 70rpx;
      }
      .yellow {
        color: #ea5504;
        text-decoration: underline;
      }
    }
  }
  .btn {
    height: 50rpx;
    display: flex;
    justify-content: center;
    align-items: cente;
    position: absolute;
    right: 20rpx;
    top: 50%;
    margin-top: -25rpx;
  }
  // newcss end
  .get-btn {
    width: 146upx;
    height: 52upx;
    line-height: 50upx;
    /* position: absolute;
            top: 50%;
            right: 20upx; */
    margin-top: -26upx;
    text-align: center;
    border-radius: 60upx;
    color: #ff4a26;
    border: 1px solid #ff4a26;
    font-size: $uni-font-size-sm;
    /* float: right; */
  }
}
.coupon-item:after {
  width: 40upx;
  height: 20upx;
  position: absolute;
  left: 470upx;
  top: -1px;
  border-radius: 0 0 40upx 40upx;
  content: "";
  display: block;
  background: #f5f5f7;
  border: 1px solid #eeeeee;
  border-top: 0px;
}
.coupon-item:before {
  width: 40upx;
  height: 20upx;
  position: absolute;
  left: 470upx;
  bottom: -1px;
  border-radius: 40upx 40upx 0 0;
  content: "";
  display: block;
  background: #f5f5f7;
  border: 1px solid #eeeeee;
  border-bottom: 0px;
}
</style>
